<template>
	<view>
		<!-- <image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg.png'"> -->
		<u-sticky>
			<view class="m-head1">
				<image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
				<u-navbar :leftText="kind==0?'月卡记录':'错峰共享'" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
					:bgColor="bgColor">
				</u-navbar>
				<view class="wp" v-if="false">
					<view class="ul-tabd1">
						<view class="li" v-for="(item, index) in tabList" :key="index" :class="actNum == index ? 'on' : ''"
							@click="actNum = index">{{ item.tit }}
						</view>
					</view>
				</view>

				<!-- <view class="m-order1">
            <picker @change="bindPickerChange" :value="index" :range="array">
              <view class="uni-input num2">{{array[index]}}</view>
            </picker>
            <view class="num">点击筛选车牌</view>
            <image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
          </view> -->

				<view class="m-order1" v-if="false">
					<view class="inner">
						<view class="current-plate" @click="showPopup = true">
							<view class="num num2">{{ selectedPlate }}</view>
							<image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
						</view>
						<!-- 自定义弹窗 -->
						<view class="custom-popup" v-if="showPopup">
							<!-- 遮罩层 -->
							<view class="popup-mask popup-mask2" @click="showPopup = false"></view>
							<view class="popup-mask" @click="showPopup = false"></view>
							<!-- 弹窗内容 -->
							<view class="popup-content">
								<view class="plate-section">
									<picker-view class="plate-picker" :value="pickerValue" @change="onPickerChange"
										indicator-style="height: 80rpx;">
										<picker-view-column>
											<view class="plate-item" v-for="(plate, index) in plateList" :key="index"
												:class="{ active: pickerValue[0] === index }">
												{{ plate }}
											</view>
										</picker-view-column>
									</picker-view>
								</view>
								<view class="confirm-btn" @click="handleConfirm">
									确定
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</u-sticky>

		<view class="row-order">
			<view class="wp">
				<view v-if="actNum == 0">
					<view class="ul-tabchd1" v-if="false">
						<view class="li" v-for="(item, index) in list1" :key="index" :class="actNumch == index ? 'on' : ''"
							@click="actNumch = index">{{ item.name }}
						</view>
					</view>

					<view v-if="actNumch == 0">
						<view class="ul-parkrecord">
							<view class="li" v-for="item in listPeriod" :key="item.id" :class="item.class">
								<!-- :style="{ backgroundColor: item.state == -1
								    ? '#696969'
								    : item.state == 1
								    ? '#5DE70D'
								    : item.state == 0
								    ? '#9370DB'
								    : '', }" -->
								<view class="con">
									<image class="bg-img" :src="item.groupType == 0 ? imageUrl + 'cart.png' : imageUrl + 'cars.png'"
										mode="widthFix"></image>
									<view class="ps" v-if="false">进行中</view>
									<view class="top">
										<view class="left">
											<view class="tit">车牌号码：{{ item.plate }}</view>
											<view class="tit" style="margin-top: 20px">{{item.groupType==0?'车场名称':'车场组名称'}}：{{ item.name }}
											</view>
											<!--<view class="desc">小型车|包月时长31天</view>-->
										</view>
										<view class="right" v-if="false">
											剩余
											<view class="span">20</view>
											天
										</view>
									</view>
									<view class="dw">
										<view class="info">有效期至：{{ item.end }}</view>
										<view class="btn" @click="nextPage(item)" v-if="item.state != 1">续期</view>
									</view>
								</view>
								<!-- <view class="delete-btn">删除</view> -->
								<image :src="imageUrl +'icone2.png'" class="delete-btn" @click="handleDelete(item)"
									v-if="item.state == -1"></image>
							</view>
						</view>
					</view>
					<view v-if="actNumch == 1">
						<view class="ul-parkrecord ul-parkrecord_non">
							<view class="li" v-for="item in 3">
								<view class="con">
									<view class="ps ps2">已过期</view>
									<view class="top">
										<view class="left">
											<view class="tit">夷陵市属公园1号停车场</view>
											<view class="desc">小型车|包月时长31天</view>
										</view>
									</view>
									<view class="dw">
										<view class="info">2025-09-01至2025-10-01</view>
										<view class="btn">续期</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="actNumch == 2">
						<view class="ul-parkrecord">
							<view class="li" v-for="item in 3">
								<view class="con">
									<view class="ps ps2">未通过</view>
									<view class="top">
										<view class="left">
											<view class="tit">夷陵市属公园1号停车场</view>
											<view class="desc">小型车|包月时长31天</view>
										</view>
										<view class="right">
										</view>
									</view>
									<view class="dw">
										<view class="info"></view>
										<view class="btn">重新购买</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="actNum == 1">
					<view class="ul-tabchd1" v-if="false">
						<view class="li" v-for="(item, index) in list1" :key="index" :class="actNumch == index ? 'on' : ''"
							@click="actNumch = index">{{ item.name }}
						</view>
					</view>
					<view v-if="actNumch == 0">
						<view class="ul-parkrecord">
							<view class="li" v-for="item in 3">
								<view class="con">
									<view class="ps">进行中</view>
									<view class="top">
										<view class="left">
											<view class="tit">夷陵市属公园1号停车场</view>
											<view class="desc">小型车|包月时长31天</view>
										</view>
										<view class="right">
											剩余
											<view class="span">20</view>
											天
										</view>
									</view>
									<view class="dw">
										<view class="info">2025-09-01至2025-10-01</view>
										<view class="btn">续期</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="actNumch == 1">
						<view class="ul-parkrecord ul-parkrecord_non">
							<view class="li" v-for="item in 3">
								<view class="con">
									<view class="ps ps2">已过期</view>
									<view class="top">
										<view class="left">
											<view class="tit">夷陵市属公园1号停车场</view>
											<view class="desc">小型车|包月时长31天</view>
										</view>
									</view>
									<view class="dw">
										<view class="info">2025-09-01至2025-10-01</view>
										<view class="btn">续期</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="actNumch == 2">
						<view class="ul-parkrecord">
							<view class="li" v-for="item in 3">
								<view class="con">
									<view class="ps ps2">未通过</view>
									<view class="top">
										<view class="left">
											<view class="tit">夷陵市属公园1号停车场</view>
											<view class="desc">小型车|包月时长31天</view>
										</view>
										<view class="right">
										</view>
									</view>
									<view class="dw">
										<view class="info"></view>
										<view class="btn">重新购买</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<button class="g-submit1 g-submite1" @click="add">办理月卡</button>
	</view>
</template>

<script>
	import mList from '@/components/m-list.vue';
	import {
		get,
		commonSelect,
		commonUpdate
	} from '../../api/myHttps.js';

	export default {
		components: {
			mList
		},
		data() {
			return {
				showPopup: false,
				selectedPlate: '',
				pickerValue: [0], // 默认选中第一个
				plateList: [],

				// 头部背景色
				bgColor: 'transparent',
				actNum: 0,

				tabList: [{
						tit: '路内停车点'
					},
					{
						tit: '封闭停车场'
					},
				],
				actNumch: 0,
				list1: [{
					name: '进行中',
				}, {
					name: '已过期',
				}, {
					name: '未通过'
				}, ],
				array: ['鄂 · EE12345', '鄂 · EE12346', '鄂 · EE12347', ],
				index: 0,
				listPeriod: [],
				kind: 0
			}
		},
		onLoad(options) {
			this.kind = options.kind;
			// 初始化选中第一个车牌
			this.selectedPlate = this.plateList[0]
			this.list();
		},

		methods: {
			add() {
				uni.navigateTo({
					url: '/pages/monthlycard/select?kind='+this.kind
				})
			},
			nextPage(item) {
				console.log(JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/monthlycard/monthlycard?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			list() {
				let ownerId = uni.getStorageSync("ownerId");
				let data = {
					"key": "plate_list_zkh",
					"phone": uni.getStorageSync('phone'),
					"parameter": {
						"kind": this.kind,
						"ownerId": uni.getStorageSync('ownerId')
					}
				};
				commonSelect(data).then((res) => {
					this.listPeriod = res.records;

					const now = new Date();
					const oneMonthLater = new Date(now);
					oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);

					for (var i = 0; i < this.listPeriod.length; i++) {
						const endDate = new Date(this.listPeriod[i].end);
						if (endDate < now) {
							this.listPeriod[i].state = -1;
							this.listPeriod[i].class = 'state-expired';
						} else if (endDate.getTime() > oneMonthLater.getTime()) {
							this.listPeriod[i].state = 1;
							this.listPeriod[i].class = 'state-active';
						} else {
							this.listPeriod[i].state = 0;
							this.listPeriod[i].class = 'state-expiring';
						}
					}
				})
			},
			// picker值变化
			onPickerChange(e) {
				this.pickerValue = e.detail.value
			},

			// 确认选择
			handleConfirm() {
				const selectedIndex = this.pickerValue[0]
				this.selectedPlate = this.plateList[selectedIndex]
				this.showPopup = false

				// 这里可以添加筛选逻辑
				// uni.showToast({
				// 	title: `已选择：${this.selectedPlate}`,
				// 	icon: 'success'
				// })
			},
			handleCityConfirm(e) {
				this.selectedCity = e.value[0].label
				this.showPicker = false
			},
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = 'transparent'
				} else {
					this.bgColor = 'transparent'
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			handleDelete(item) {
				// 执行删除逻辑，例如弹出确认框
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行删除操作
							console.log('用户点击确定')
							let data = {
								"key": "plate_delete_zkh",
								"phone": uni.getStorageSync('phone'),
								"parameter": {
									"id": item.id,
									"groupType": item.groupType,
									"parkId": item.parkId,
									"plate": item.plate
								}
							}
							commonUpdate(data).then((res) => {
								uni.showToast({
									title: '操作成功',
									icon: 'success', // 显示成功图标（✅）
									duration: 1500 // 持续时间，单位毫秒（默认 1500）
								});
								setTimeout(function() {
									this.list();
								}, 2000);

							})
						}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F4FAF7;
	}

	.li {
		position: relative;
		/* 必须设置，作为绝对定位的参照 */
		background-color: #fff;
		padding: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.delete-btn {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 10;
		opacity: 0.8;
	}

	.delete-btn:hover {
		transform: scale(1.1);
		transition: transform 0.2s;
	}

	.state-active {
		background-color: #e6f7ff;
		border: 1px solid #91d5ff;
	}

	.state-expiring {
		background-color: #fff2f0;
		border: 1px solid #f5c6cb;
	}

	.state-expired {
		background-color: #f5f5f5;
		border: 1px solid #d9d9d9;
	}

	.li {
		position: relative;
		padding: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		/* 防止图片溢出 */
	}

	/* 背景图：靠右、不遮挡文字 */
	.bg-img {
		position: absolute;
		top: 0;
		right: 0;
		/* 关键：靠右 */
		width: 50%;
		/* 控制图片宽度，比如 120rpx */
		height: 100%;
		z-index: 1;
		opacity: 0.15;
		/* 可选：降低透明度，避免干扰文字 */
		pointer-events: none;
		/* 禁止点击穿透干扰按钮 */
	}

	/* 文字内容区：预留右侧空间 */
	.con {
		position: relative;
		z-index: 2;
		color: #333;
		padding-right: 140rpx;
		/* 比图片宽一点，确保文字不被覆盖 */
		box-sizing: border-box;
	}
</style>